<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>三列布局</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.parent{
				width: 100%;
			}
			.parent>div{
				height: 300px;
			}
			.parent .left{
				width: 30%;
				background: #00FFFF;
				/* 3.为左侧元素设置浮动 */
				float: left;
			}
			.parent .center{
				width: 30%;
				background: red;
				/* 4.为中间元素设置浮动 */
				float: left;
			}
			.parent .right{
				background: forestgreen ;
				/* 5.为右侧元素设置margin */
				margin-left: 60%;
			}
			
			/* 
				三列布局方式与两列布局方式，布局原理是相同的，只是多了 一列定宽：
					实现方式：
					  1.float + margin 
					  2.float + overflow
					  3.display+table
			 */
		</style>
	</head>
	<body>
		<!-- 1.定义父级元素 -->
		<div class="parent">
			<!-- 2.定义子级元素 -->
			<div class="left">左侧：定宽</div>
			<div class="center">中间部分</div>
			<div class="right">右侧：自适应</div>
		</div>
	</body>
</html>
